<template>
  <div class="DoctorList">
    <!--    面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '' }">医院信息管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/doctor' }"
        >医生管理
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="hospitalMain">
      <!--      搜索部分-->
      <div class="hospitalMain-top">
        <!--        搜索-->
        <div class="hospitalMain-search">
          <div class="search">
            医生姓名:
            <el-input
              placeholder="请输入内容"
              v-model="DoctorForm.docName"
              clearable
            ></el-input>
          </div>
          <div class="search">
            所属医院:
            <el-input
              placeholder="请输入内容"
              v-model="DoctorForm.hosName"
              clearable
            ></el-input>
          </div>
          <div class="search">
            账号状态 :
            <el-input
              placeholder="请输入内容"
              v-model="DoctorForm.status"
              clearable
            ></el-input>
          </div>
          <div class="search">
            医生性别:
            <template>
              <el-select v-model="DoctorForm.sex" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.ex"
                ></el-option>
              </el-select>
            </template>
          </div>
          <div class="search">
            <div></div>
            <div>
              <el-button>重置</el-button>
              <el-button type="primary" @click="searchDoctor()">搜索</el-button>
            </div>
          </div>
        </div>
        <div></div>
      </div>
      <!--      表格名和添加部分-->
      <div class="name_add">
        <div><h3>医生列表</h3></div>
        <div>
          <router-link to="/addDoctor">
            <el-button type="primary">新增医生</el-button>
          </router-link>
        </div>
      </div>
      <!--    表格-->
      <template>
        <el-table :data="DoctorList_1" style="width: 100%">
          <el-table-column label="ID">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.doId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="120">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.doName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别" width="120">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.doSex }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属医院">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.hosName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="病人数量" width="120">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.useNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="联系电话">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间 ">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.crateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="账号状态" width="120">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.status }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                size="middle"
                type="text"
                @click="checkdoctor(scope.row)"
                >查看
              </el-button>
              &nbsp;&nbsp;&nbsp;
              <el-button
                size="middle"
                type="text"
                @click="stopStatus(scope.row)"
                >停用
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--    页码-->
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="getPageNumBtn"
        :current-page="pageNo"
        :page-size="pageSize"
        :total="doctorCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
// import { mapGetters, mapActions } from "vuex";

export default {
  name: "DoctorList",
  computed: {
    DoctorList_1() {
      return this.DoctorList.map(function (item) {
        if (item.status == 0) {
          item.status = "停用";
        } else {
          item.status = "启用";
        }
        return item;
      });
    },
  },
  created() {
    
  },
  data() {
    return {
      DoctorList: [],
      disCount: 120,
      pageSize: 5, //每页显示条数
      pageNo: 1, //当前页码

      doctorCount: null,

      DoctorForm:{
        docName: "",
      hosName: "",
      status: "",
      sex: "",
      },
      // searchForm: {

      // },
      value5: "",

      options: [
        {
          ex: "男",
          label: "男",
        },
        {
          ex: "女",
          label: "女",
        },
      ],
    };
  },
  mounted() {
    this.getDoctorList(this.pageNo, this.pageSize);
  },
  methods: {
    hosBackBtn() {
      this.$router.push("/doctor");
    },
    checkdoctor(row) {
      //查看医生
      // window.sessionStorage.setItem("id", row.doId);
      this.$router.push({
        path: "/checkdoctor",
        query: {
          id: row.doId,
        },
      });
    },
    stopStatus(row) {
      //停用状态
      let id = row.doId;
      this.$service.doctorService.stopStatus(id).then(() => {
        this.getDoctorList(this.pageNo, this.pageSize);
      });
    },
    searchDoctor() {
      //搜索医生列表
      this.$service.doctorService
        .searchDoctor(
          this.DoctorForm.docName,
          this.DoctorForm.hosName,
          this.DoctorForm.status,
          this.DoctorForm.sex,
          this.pageNo,
          this.pageSize
        )
        .then((res) => {
          this.doctorCount = res.data.total;
          this.DoctorList = res.data.data;
          
        });
    },
    getPageNumBtn(val) {
      //获取当前点击的页码
      this.pageNo = val;
      this.getDoctorList(this.pageNo, this.pageSize);
    },

    getDoctorList(pageNo, pageSize) {
      //获取医生列表
      this.$service.doctorService
        .getDoctorList(pageNo, pageSize)
        .then((res) => {
          this.doctorCount = res.data.total;

          this.DoctorList = res.data.data;
          console.log(this.DoctorList);
        });
    },
  },
};
</script>

<style scoped lang="less">
.search {
  border: none;
}

.hospitalMain {
  display: flex;
  flex-direction: column;

  .hospitalMain-top {
    display: flex;
    justify-content: space-between;

    margin: 10px 0;

    .hospitalMain-search {
      margin-right: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .search {
        display: flex;
        margin: 10px 0 10px;

        align-items: center;
        width: 30%;
        justify-content: space-between;

        .el-input,
        .el-select {
          width: 75%;
        }
      }
    }
  }

  .name_add {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
  }

  .el-pagination {
    margin-top: 10px;
  }
}
</style>
